<template>
    <div class="alert-dialog ">
        <Cdialog :visible="showDialog" @closeDialog="changeVisible"
            :width="initAlertDetail.equipmentType == 'MONITOR' ? '1080' : '600'" title="告警处理">
            <div class="alert-detail-container fs12">
                <div class="alertDetail">
                    <div class="alertDetailTab" v-if="initAlertDetail.equipmentType == 'MONITOR'">
                        <div class="alert-linkage">
                         
                        </div>
                        <div class="alert-Message">
                            <img :src="initAlertDetail.imageUrl" alt="">
                        </div>
                    </div>
                    <div class="detail-right" :style="initAlertDetail.equipmentType == 'MONITOR' ? '' : 'flex:1'">
                        <div class="alertLocation">
                            {{ initAlertDetail.alarmName }}
                        </div>
                        <div class="alert-message">
                            <div class="alert-message-box">
                                <div class="alert-message-details">
                                    <div class="alert-detail-lv">
                                        告警等级：<span :style="alertColor(initAlertDetail.alertGrade)">{{
                                            alertLv(initAlertDetail.alertGrade) }}</span>
                                    </div>

                                    <div class="alert-detail-ename">
                                        设备名称： {{ initAlertDetail.equipmentName }}
                                    </div>
                                    <div class="alert-detail-location">
                                        设备位置： {{ initAlertDetail.equipmentLocation }}
                                    </div>
                                    <div class="alert-detail-time">
                                        告警时间： {{ secTotime(initAlertDetail.timeOfDuration) }}
                                    </div>
                                </div>
                                <div class="alert-message-image" v-if="initAlertDetail.imageUrl">
                                    <img :src="initAlertDetail.imageUrl" alt="">
                                </div>
                            </div>
                            <div class="handle-status-input">
                                <div class="handleStatus">
                                    <span style="color: #EC3C32 ;margin-right: 3px;">*</span>处理结果：
                                    <div class="status">
                                        <div class="statusItem" v-for="(item, index) in handleStatus">
                                            <svg-icon :icon="index == alertStatus ? '未处理' : '已处理'"
                                                @click="changeHandleStatus(index)" style="cursor: pointer;"></svg-icon>
                                            {{ item.hstatusName }}
                                        </div>
                                    </div>
                                </div>
                                <div class="handleMessage">
                                    描述：<textarea v-model="handleMessage"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="alertHandle">
                    <div class="handle">
                        <div class="paging">
                            <cdButton color="#2050AD" title="上一条" @click="changePage('pre')"></cdButton>
                            <div class="page">
                                <div class="currentIndex">
                                    {{ currentIndex }}
                                </div>
                                /
                                <div class="pageTotal">
                                    {{ total }}
                                </div>
                            </div>
                            <cdButton color="#2050AD" title="下一条" @click="changePage('next')"></cdButton>
                        </div>
                        <div class="handle-btn-group">
                            <cdButton color="#132F66" title="确认" @click="cancelAlarm"></cdButton>
                            <cdButton color="#2050AD " title="转发工单"></cdButton>
                        </div>
                    </div>
                </div>
            </div>
        </Cdialog>
    </div>
</template>

<script setup lang="ts">
import {  ref, computed, onUnmounted } from 'vue';
import { secTotime } from '@/utils/tool'
import { useAlertDetailStore } from '@/stores/alertDeail'
import service from '@/utils/alarmresquest'

const total = ref(100)
const currentIndex = ref(1)

const alertDetailStore = useAlertDetailStore()
const cancelAlarm = async (item: any) => {
    service({
        url: '/alarms/2849013657215486',
        method: 'POST',
        data: [
            {
                "twinID": "监控设备1",
                "severity": 1,
                "status": 2,
                "sourceAlertKey": "CPU使用率",
                "summary": "CPU使用率超过90%，已连续发生超过3次",
                "sourceIdentifier": "xxx",
                "lastOccurrence": "2020-07-29 09:33:06"
            }
        ]
    })
    alertDetailStore.SetShow(false)
    handleMessage.value = ''
    alertStatus.value = -1
}


const handleStatus = [
    { hstatusName: '未处理', num: 0 },
    { hstatusName: '已处理', num: 1 },
]
const showDialog = computed(() => {
    return alertDetailStore.$state.show
})
const changeVisible = (v: any) => {
    console.log(v);
    
    alertDetailStore.SetShow(v)
    handleMessage.value = ''
    alertStatus.value = -1
}
const alertTab = [
    { tabName: '联动预览' },
    { tabName: '联动回放' },
    { tabName: '图片' },
]
const alertDetail = ref()
const initAlertDetail: any = computed(() => {
    return alertDetailStore.$state.message
})
const alertStatus = ref(-1)

const alertColor: any = ((lv: any) => {
    switch (lv) {
        case 'ERROR':
            return 'color:#EC3C32;background-color:rgba(219, 54, 44, 0.16);box-shadow: inset 0px 0px 8px 0px #EC3C32;'
    }
})
const alertLv: any = ((lv: any) => {
    switch (lv) {
        case 'ERROR':
            return '紧急'
    }
})
const changePage = (type: any) => {
    switch (type) {
        case 'pre':
            if (currentIndex.value > 1) {
                currentIndex.value = currentIndex.value - 1
                return
            } else {
                return
            }
        case 'next':
            if (currentIndex.value < total.value) {
                currentIndex.value++
                return
            }
            else {
                return
            }
    }
}
const changeHandleStatus = (index: any) => {
    alertStatus.value = index
}
const handleMessage = ref('')
onUnmounted(() => {

})
</script>

<style scoped lang="scss">
.alert-detail-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 524px;

    .alertDetail {
        display: flex;
        flex: 0.80;


        .alertDetailTab {
            flex: 0.5;
            display: flex;
            flex-direction: column;

            .alert-linkage {
                display: flex;
                flex-direction: column;
                width: 100%;
                flex: 0.10;

                .linkage-tab {
                    width: 100%;
                    display: flex;

                    .tab-item {
                        margin-right: 25px;
                    }
                }
            }

            .alert-Message {
                width: 100%;
                flex: 0.9;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }


        .detail-right {
            flex: 0.5;
            width: 100%;
            height: 100%;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .alertLocation {
                flex: 0.1;
                color: #FFFFFF;
                font-weight: bold;
            }

            .alert-message {
                flex: 0.9;
                display: flex;
                flex-direction: column;
                justify-content: space-between;




                .alert-message-box {
                    flex: 0.45;
                    padding: 16px;
                    box-sizing: border-box;
                    display: flex;

                    .alert-message-details {

                        flex: 0.4;

                        &>div {
                            color: rgba(255, 255, 255, 1);
                            margin-bottom: 16px;
                        }

                        .alert-detail-lv {
                            span {
                                padding: 5px 12px;
                                border-radius: 4px;
                            }
                        }
                    }

                    .alert-message-image {
                        flex: 0.6;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .handle-status-input {
                    display: flex;
                    flex: 0.55;
                    flex-direction: column;
                    padding: 16px;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;

                    .handleStatus {
                        display: flex;
                        align-items: center;
                        flex: 0.3;

                        .status {
                            display: flex;

                            .statusItem {
                                margin-right: 30px;

                                &:first-child {
                                    margin-left: 5px;
                                }
                            }
                        }
                    }

                    .handleMessage {
                        margin-left: 10px;
                        display: flex;
                        flex: 0.7;

                        textarea {
                            padding: 10px;
                            box-sizing: border-box;
                            width: 90%;
                            background-color: rgba(27, 68, 148, 0.46);
                            color: #FFFFFF;
                            border: none;
                        }
                    }
                }
            }
        }
    }

    .alertHandle {
        flex: 0.2;

        .handle {
            width: 100%;
            display: flex;
            margin-top: 48px;
            justify-content: space-between;

            .paging {
                display: flex;

                &>div {
                    margin-right: 10px;
                }


                .page {
                    display: flex;
                    align-items: center;
                    flex: 0.4;
                    justify-content: center;
                }
            }

            .handleOption {
                flex: 0.55;
            }

            .handle-btn-group {
                display: flex;
                justify-content: right;

                &>div {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>